<template>
  <el-container class="home-qyda">
    <el-header class="header" style="margin-bottom: 0">
      <div class="header-l">
        <LabelTitle text="商户信息详情"></LabelTitle>
      </div>
    </el-header>
    <el-header class="header" style="margin-bottom: 0">
      <div class="header-l">
        <div class="tab-select border">
          <span
            v-for="(item, index) in tablist"
            class="btn nobg"
            :class="{
              active: currentTab == item.objectId,
              noright: index == 1,
            }"
            @click="selectTab(item.objectId)"
            :key="index"
            >{{ item.tableNameChn }}</span
          >
        </div>
      </div>
    </el-header>
    <el-main>
      <!-- <el-container>
        <el-main> -->
      <formDetail
        v-if="currentTab == '1'"
        :currentData="props.row"
        @close="close"
      ></formDetail>
      <listDetail :currentData="props.row" v-else @close="close"></listDetail>
      <!-- </el-main>
      </el-container> -->
    </el-main>
  </el-container>
  <!-- <detail :currentData="props.row" v-else></detail> -->
</template>

<script setup>
import { onMounted, ref, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getTypeList, busioptions } from "@/api";
import { getsjqdList } from "@/api/sjqd";
import { Minxfun } from "@/utils/minxin";
import detail from "./detail.vue";
import LabelTitle from "@/components/labeltitle.vue";
import formDetail from "./component/formdetail.vue";
import listDetail from "./component/listdetail.vue";

const emit = defineEmits("close");
const props = defineProps({
  row: { type: Object, required: false },
});

let tablist = ref([
  { objectId: "1", tableNameChn: "商户基本信息" },
  { objectId: "2", tableNameChn: "安全检查记录" },
]);

watch(
  () => props.row,
  (newData) => {
    if (!newData.id) {
      tablist.value = [{ objectId: "1", tableNameChn: "企业基本信息" }];
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const close = () => {
  emit("close");
};

const ruleFormRef = ref();
const search = reactive({
  qyda: "",
  tyxydm: "",
  agfzr: "",
  hylb: "",
});

let currentTab = ref("1");
const selectTab = (tabId) => {
  currentTab.value = tabId;
};
</script>

<style lang="scss" scoped>
.home-qyda {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
  }
  .container {
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.search {
  margin: 0 50px;
}
.header-r {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
}
</style>

<style>
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>
